<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>选项卡</title>
    <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
<script src="resources/common/jquery/jquery-3.2.1.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<style type="text/css">
	.btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #00b4ef;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		}
</style>
  </head>
  <script type="text/javascript">
  //刷新
  var upu = function(){
  	$.ajax({
        		url:'upuser.do',
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		data:JSON.stringify({"id":$("#improve_id").val()}),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		success:function(data){//成功
        			$("#improve_id").val(data.id);
		        	$("#improve_name").val(data.name);
		        	$("#improve_uname").val(data.uname);
		        	$("#improve_pwd").val(data.password);
		        	$("#improve_tel").val(data.tel);
		        	$("#improve_addr").val(data.addr);
		        	
		        	$("#cname").html("姓&nbsp;名:&nbsp;"+data.name);
		        	$("#cuname").html("用户名：&nbsp;"+data.uname);
		        	$("#ctel").html("电&nbsp;话:&nbsp;"+data.tel);
		        	$("#caddr").html("地&nbsp;址：&nbsp;"+data.addr);
		        	}
        	});
  }
  $(document).ready(function(){  
        $("#improvemsg").click(function(){  
            $("#new").modal("show")  
        });
        $("#upmsg").click(upu);
        $("#improveu").click(function(){
        	var jdata = {
        	"id":$("#improve_id").val(),
        	"name":$("#improve_name").val(),
        	"uname":$("#improve_uname").val(),
        	"password":$("#improve_pwd").val(),
        	"tel":$("#improve_tel").val(),
        	"addr":$("#improve_addr").val()
        	};
        	$.ajax({
        		url:'improveuser.do',
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		data:JSON.stringify(jdata),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		success:function(data){//成功
        			
        			if(data.succ == 'true'){
        				alert("保存成功");
        				$("#new").modal("hide");
        				upu();
        			}else{
        				alert(data.msg);
        			}
        		},
        		error:function(xhr,textStatus){//失败
        			alert("保存失败");
        		}
        	});
        });
    })
    
    
    </script>
  <body>
  	<div style="height:80%;background-color: #efe8d5" id="users">
  		<div>
  		<button type="button" data-toggle="modal" id="improvemsg"
		                            class="btn btn-primary">完善信息</button>
		<button type="button" data-toggle="modal" id="upmsg"
		                            class="btn btn-primary">刷新</button>
  		</div>
		<form class="form-horizontal" role="form">
			<div class="panel panel-info">
				<div class="panel-heading bg-primary">
					<h4 class="panel-title font-weight">
						<a data-toggle="collapse" data-parent="#accordion"
							href="#collapseOne"><strong>基本信息</strong></a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
					<div class="panel-body panel-success">
						<div class="form-group ">
							<label class="col-sm-6 form-label" for="ds_host" id="cname">姓&nbsp;名:&nbsp;<c:out
									value="${user.name}"></c:out></label> <label
								class="col-sm-6 form-label" for="ds_name" id="cuname">用户名：&nbsp;<c:out 
									value="${user.uname}"></c:out></label>

						</div>
					</div>
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading bg-primary">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion"
							href="#collapseTwo"><strong>详细信息</strong> </a>
					</h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body panel-success">
						<div class="form-group ">
							<label class="col-sm-6 form-label" for="ds_host" id="ctel">电&nbsp;话:&nbsp;<c:out 
									value="${user.tel}"></c:out></label> <label class="col-sm-6 form-label"
								for="ds_name" id="caddr">地&nbsp;址：&nbsp;<c:out value="${user.addr}" ></c:out></label>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	
	<!-- 完善信息 -->
	<div class="modal fade" id="new">  
            <div class="modal-dialog">    
              <div class="modal-content">    
                <div class="modal-header"> 完善信息</div>    
                <form class="form-horizontal" action="improveuser.do" method="post">    
                  <div class="modal-body">    
                    <div class="form-group">    
                      <label for="improve_tel" class="col-sm-2 control-label">电话</label>    
                      <div class="col-sm-10">    
                        <input id="improve_tel" type="text" value="${user.tel}" name="improve_tel" class="form-control list-inline" placeholder="电话"/>    
                      </div>    
                    </div>
                    <div class="form-group">    
                      <label for="improve_addr" class="col-sm-2 control-label">地址</label>    
                      <div class="col-sm-10">    
                        <input id="improve_addr" type="text" value="${user.addr}" name="improve_addr" class="form-control list-inline" placeholder="地址"/>    
                      </div>    
                    </div>  
                  </div>    
                 <input type="text" id="improve_name" name="improve_name" value="${user.name}" style="display: none;">
                 <input type="text" id="improve_id" name="improve_id" value="${user.id}" style="display: none;">
                 <input type="text" id="improve_uname" name="improve_uname" value="${user.uname}" style="display: none;">
                 <input type="text" id="improve_pwd" name="improve_pwd" value="${user.password}" style="display: none;">
                <div class="modal-footer">    
                  <button class="btn btn-success" id="improveu" type="button">保存</button>    
                  <button class="btn btn-danger" data-dismiss="modal">取消</button>    
                </div>  
                </form>  
              </div>    
            </div>    
          </div>   
  </body>
</html>
